<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
const swiper = ref<HTMLElement | null>(null)
const pagination = ref<HTMLElement | null>(null)
const currentIndex = ref(0)
const container = ref<HTMLElement | null>(null)
const data = reactive({})

const props = defineProps({
  resources: {
    type: Array,
    default: () => [1, 2, 3, 4],
  },
})

let swiperItems: any = []
let timer: any = null
let flag: boolean = true
let is_prev = false
const arrowPosition = ref({
  left: '',
  top: '',
})
const paginationPosition = ref({
  left: '',
  top: '',
})

const next = () => {
  if (flag) {
    flag = false
    if (swiper.value) {
      currentIndex.value++
      if (currentIndex.value >= swiperItems.length) {
        swiper.value.style.transition = 'left .3s ease'
        swiper.value.style.left = `-${
          currentIndex.value * swiper.value.offsetWidth
        }px`
        let temp = setTimeout(() => {
          if (swiper.value) {
            currentIndex.value = 0
            swiper.value.style.transition = 'none'
            swiper.value.style.left = `-${
              currentIndex.value * swiper.value.offsetWidth
            }px`
            flag = true
            clearTimeout(temp)
            autoPlay()
          }
        }, 200)
        return
      }
      swiper.value.style.transition = 'left .3s ease'
      swiper.value.style.left = `-${
        currentIndex.value * swiper.value.offsetWidth
      }px`
      let temp = setTimeout(() => {
        flag = true
        clearTimeout(temp)
        autoPlay()
      }, 300)
    }
  }
}

const prev = () => {
  is_prev = true
  if (flag) {
    flag = false
    if (swiper.value) {
      if (currentIndex.value === 0) {
        swiper.value.style.transition = 'none'
        swiper.value.style.left = `-${
          swiperItems.length * swiper.value.offsetWidth
        }px`
        currentIndex.value = swiperItems.length
        let temp = setTimeout(() => {
          if (swiper.value) {
            swiper.value.style.transition = 'left .5s ease'
            currentIndex.value = swiperItems.length - 1
            swiper.value.style.left = `-${
              currentIndex.value * swiper.value.offsetWidth
            }px`
            flag = true
            clearTimeout(temp)
            autoPlay()
          }
        }, 200)
        is_prev = false
        return
      }
      currentIndex.value--
      swiper.value.style.transition = 'left .5s ease'
      swiper.value.style.left = `-${
        currentIndex.value * swiper.value.offsetWidth
      }px`
      let temp = setTimeout(() => {
        flag = true
        is_prev = false
        clearTimeout(temp)
        autoPlay()
      }, 300)
    }
  }
}

const changeBanner = (index: number) => {
  if (swiper.value) {
    currentIndex.value = index
    swiper.value.style.transition = 'none'
    swiper.value.style.left = `-${
      currentIndex.value * swiper.value.offsetWidth
    }px`
    clearInterval(timer)
    autoPlay()
  }
}

const autoPlay = () => {
  stopPlay()
  timer = setInterval(next, 4000)
}

const stopPlay = () => {
  clearInterval(timer)
}

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // console.log('元素宽度大小改变：', entry.target.offsetWidth)
    // console.log('元素高度大小改变：', entry.target.offsetHeight)

    arrowPosition.value.left = `${86}%`
    paginationPosition.value.left = `${5}%`

    arrowPosition.value.top = `${80}%`
    paginationPosition.value.top = `${80}%`
  }
})

onMounted(() => {
  swiperItems = document.querySelectorAll('.swiper-slide')
  let item = swiperItems[0].cloneNode(true)
  if (container.value) {
    resizeObserver.observe(container.value)
  }
  if (swiper.value) {
    swiper.value.appendChild(item)
  }
  autoPlay()
})

onUnmounted(() => {
  clearInterval(timer)
  if (resizeObserver) {
    resizeObserver.disconnect()
  }
})
</script>
<template>
  <div ref="container" class="swiper-container">
    <div
      class="swiper-wrapper"
      ref="swiper"
      @mouseover="stopPlay"
      @mouseout="autoPlay"
    >
      <div
        class="swiper-slide"
        v-for="(item, index) in props.resources"
        :key="index"
      >
        <img width="100%" height="100%" :src="item.imageSrc" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div ref="pagination" class="swiper-pagination" :style="paginationPosition">
      <div
        :class="[
          'swiper-pagination-bullet',
          currentIndex === index ? 'active' : '',
          is_prev ? 'l' : '',
        ]"
        v-for="(item, index) in props.resources"
        :key="index"
        @click="changeBanner(index)"
      >
        <div v-if="index === currentIndex"></div>
        <div v-if="index === currentIndex"></div>
      </div>
    </div>

    <!-- 如果需要导航按钮 -->
    <div class="operate-box" :style="arrowPosition">
      <div class="swiper-button-prev" @click="prev">
        <i class="iconfont icon-jiantouzuo"></i>
      </div>
      <div class="swiper-button-next" @click="next">
        <i class="iconfont icon-jiantouyou"></i>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  transition: left 0.3s ease;
}

.swiper-slide {
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  background-color: skyblue;
}

.swiper-pagination {
  position: absolute;
  bottom: 6%;
  left: 10%;
  height: 30px;
  transform: translateX(-20%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 1px solid skyblue;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 6px;
  border-radius: 50%;
  cursor: pointer;
  &.active {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 5px;
    background-color: transparent;
    border: none;
  }
  &.active div {
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid #fff;
    border-radius: 50%;
    border-right-width: 7px;
    border-right-color: transparent;
  }
}

.swiper-pagination .swiper-pagination-bullet.active.l {
  transform: rotate(180deg);
}

.swiper-pagination .swiper-pagination-bullet.active div:nth-child(1) {
  animation: pacman1 0.75s linear forwards;
}

.swiper-pagination .swiper-pagination-bullet.active div:nth-child(2) {
  animation: pacman2 0.75s linear forwards;
}

.operate-box {
  display: flex;
  position: absolute;
  left: 70%;
  top: 85%;
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
  }
  .swiper-button-prev {
    margin-right: 10px;
  }
}

@keyframes pacman1 {
  0% {
    transform: rotate(360deg);
  }
  40% {
    transform: rotate(270deg);
  }
  60% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

@keyframes pacman2 {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 1024px) {
  .operate-box {
    left: 80% !important;
  }
  // .swiper-button-next,
  // .swiper-button-prev {
  //   width: 30px !important;
  //   height: 30px !important;
  //   line-height: 30px !important;
  // }
  .swiper-button-prev {
    margin-right: 6px !important;
  }
  .swiper-pagination {
    bottom: 6%;
    left: 12% !important;
  }
}

@media screen and (max-width: 768px) {
  .operate-box {
    left: 78% !important;
  }
  // .swiper-button-next,
  // .swiper-button-prev {
  //   width: 25px !important;
  //   height: 25px !important;
  //   line-height: 25px !important;
  // }
  .swiper-button-prev {
    margin-right: 6px !important;
  }
  .swiper-pagination {
    bottom: 6%;
    left: 14% !important;
  }
}

@media screen and (max-width: 750px) {
  .operate-box {
    left: 76% !important;
  }
  // .swiper-button-next,
  // .swiper-button-prev {
  //   width: 25px !important;
  //   height: 25px !important;
  //   line-height: 25px !important;
  // }
  .swiper-button-prev {
    margin-right: 6px !important;
  }
  .swiper-pagination {
    bottom: 6%;
    left: 14% !important;
  }
}

@media screen and (max-width: 481px) {
  .operate-box {
    left: 75% !important;
  }
  // .swiper-button-next,
  // .swiper-button-prev {
  //   width: 25px !important;
  //   height: 25px !important;
  //   line-height: 25px !important;
  // }
  .swiper-button-prev {
    margin-right: 6px !important;
  }
  .swiper-pagination {
    bottom: 6%;
    left: 16% !important;
  }
}
</style>
